import React, { useState, useEffect } from 'react'
import { Modal, Button, TextArea } from 'antd-mobile'
import { CloseOutline } from 'antd-mobile-icons'
import styles from './index.module.less'

export default function EditModal({ visible, setVisible, content, onConfirm }) {
  console.log("🚀 ~ EditModal ~ content:", content)
  const [editContent, setEditContent] = useState(content.message || '')
  // 当弹窗打开时，更新编辑内容为传入的 content
  useEffect(() => {
    if (visible) {
      setEditContent(content.message || '');
    }
  }, [visible, content]);

  // 处理取消
  const handleCancel = () => {
    setEditContent(content.message || ''); // 重置为原始内容
    setVisible(false);
  };

  // 处理确认
  const handleConfirm = () => {
    onConfirm({
      ...content,
      message: editContent
    });
    setVisible(false);
  };
  return (
    <>
      <Modal
        visible={visible}
        className={styles.customModalWrapper}
        content={
          <div className={styles.customModal}>
            <div className={styles.modalHeader}>
              <span className={styles.title}>编辑</span>
              <Button
                className={styles.closeButton}
                fill="none"
                onClick={() => setVisible(false)}
              >
                <CloseOutline fontSize={24} />
              </Button>
            </div>

            <div className={styles.modalContent}>
              <TextArea
                placeholder="请输入要编辑的内容..."
                value={editContent}
                onChange={val => setEditContent(val)}
                autoSize={{ minRows: 6, maxRows: 10 }}
                className={styles.customTextarea}
                showCount
                maxLength={2000}
              />
            </div>

            <div className={styles.modalFooter}>
              <Button
                className={styles.cancelButton}
                fill="none"
                onClick={handleCancel}
              >
                取消
              </Button>
              <Button
                className={styles.confirmButton}
                color="primary"
                onClick={handleConfirm}
              >
                确认
              </Button>
            </div>
          </div>
        }
        closeOnMaskClick={true}
        showCloseButton={false}
      />
    </>
  )
}

